@extends('manager._layouts.default')
 
@section('main')
 
    <h2>Edit news item</h2>

    {{ Notification::showAll() }}

    {{ Form::model($news,
        array(
            'method' => 'put', 
            'route' => array('manager.news.update', $news->id)
        )) 
    }}
        <div class="row">
            <div class="row col-lg-12">
                <div class="form-group col-lg-3">
                    <label for="title">News Title</label>
                    <input type="text" id="title" name="title" value="{{$news->title}}" class="newproject form-control">
                </div>
                <div class="form-group col-lg-3">
                    <label for="slug">Slug</label>
                    <i class="fa fa-fw fa-question-circle help" data-toggle="popover" data-placement="right" data-trigger="hover" data-content="This is the friendly URL of the news item" data-container="body"></i>
                    <input type="text" id="slug" name="slug" value="{{$news->slug}}" class="form-control">
                </div>
	            <div class="form-group col-lg-3">
		            <label for="title">News Date</label>
		            <div class='input-group'>
			            <?
			                $newsdate = DateTime::createFromFormat('Y-m-d', $news->date);
			            ?>
			            <input type="text" id="date" name="date" value="{{$newsdate->format('d/m/Y')}}" class="form-control datepicker">
			            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
		            </div>
	            </div>
            </div> 
        </div>

        <ul class="nav nav-tabs">
            <li class="active"><a href="#content" data-toggle="tab">Content</a></li>
            <li><a href="#images" data-toggle="tab">Images</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="content">
                <label for="project-body">Body</label>
                <textarea name="body" id="project-body-editor" class="form-control">{{$news->body}}</textarea>
			</div>
			
			<div class="tab-pane" id="images">
                <div class="row">
                    <div class="form-group col-lg-12">
                       	<div class="dropzone well" id="imagedropzone">
							<h3>Drop images here or&hellip;</h3>
							<span class="btn btn-success btn-sm fileinput-button">
								<span>Browse for images...</span>
								<!-- The file input field used as target for the file upload widget -->
								<input id="imageupload" type="file" name="theimage" data-url="{{URL::route("manager.news.uploadimage", $news->id)}}" multiple>
							</span>
						</div>
                    </div>
					
					<script>
						$(function() {
							$('#imageupload').fileupload({
								dataType: 'json',
								type : "POST",
								autoUpload: true,
								maxFileSize: 2097152, // 2MB server limit
								sequentialUploads: true,
								acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
								disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
								previewMaxWidth: 300,
								previewMaxHeight: 300,
								previewCrop: true,
								dropZone: $("#imagedropzone"),
								formData: {
									"_":"_" // dummy data to invoke correct route handler
								},
								done: function (e, data) {
									$(data.context).fadeOut("fast", function()
									{
										$(this).remove();
										$("#existingnewsimages").load("{{URL::route("manager.news.getimages", $news->id)}}");
									});																	
								}
							}).on('fileuploadadd', function (e, data) {
								data.context = $('<div class="col-lg-2 imageuploaditem"/>').appendTo('#newsimages');
								$.each(data.files, function (index, file) {
									var node = $('<p class="well text-center" />')
											.append($('<p/>').append($("<small/>").text(file.name)))
											.append($('<div class="progress progress-striped active"><div class="progress-bar progress-bar-success" role="progressbar" style="width: 0%;"></div>'));
									node.appendTo(data.context);
								});
							}).on('fileuploadprocessalways', function (e, data) {
								//console.log(data.index);
								var index = data.index,
									file = data.files[index],
									node = $(data.context.children()[index]);
								if (file.preview) {
									node
										.prepend('<br>')
										.prepend(file.preview);
								}
							}).on('fileuploadprogress', function (e, data) {
								var progress = parseInt(data.loaded / data.total * 100, 10);
								var file = data.files[0];
								$(".progress-bar", data.context).css("width", progress+"%");
								//console.log(data.index);
								/*$('#progress .progress-bar').css(
									'width',
									progress + '%'
								);*/
							}).on('fileuploadprogressall', function (e, data) {
								var progress = parseInt(data.loaded / data.total * 100, 10);
								if(progress >= 100)
								{
									$("#existingprojectimages").load("{{URL::route("manager.news.getimages", $news->id)}}");
									//document.location.href = document.location.href;
								}
							});
						});
					</script>
                </div>
				
				<div class="row" id="newsimages"></div>
                
				<div class="row" id="existingnewsimages">
					<? foreach($news->images()->get() as $img):?>
						<div class="col-lg-2 imageuploaditem">
							<div class="well text-center">
								<img src="<?=Croppa::url("/images/news/".$news->id."/".$img->imagefilename, 100)?>" class="img-thumbnail">
								<button type="button" class="btn btn-danger btn-xs btn-block deletenewsimage" data-url="{{URL::route("manager.news.deleteimage", array($news->id, $img->id) )}}"><i class="fa fa-fw fa-trash-o"></i> Delete</button>
							</div>
						</div>
					<? endforeach;?>
				</div>
				
            </div>
        </div>

        
        <div class="row">
            <div class="col-lg-12">
                <button type="submit" class="btn btn-primary btn-large">Save</button>
                <a href="{{ URL::route('manager.news.index') }}" class="btn btn-default btn-large">Cancel</a>
            </div>        
            
        </div>
 
    {{ Form::close() }}
 
@stop